<template>
  <div class="box">
    <div class="box-header">
      <span class="title pos-left">{{title}}</span>
    </div>
    <div class="box-body">
      <div class="chart fullsize" id="chart-cvm-vehicleorg"></div>
      <x-loading :show="showLoading"></x-loading>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import echarts from "echarts";
import Loading from "@/components/Loading";

export default {
  name: "",
  data() {
    return {
        showLoading:false,
        option:null,
        chartInstance:null
    };
  },
  props:{
      title:String
  },
  components: {
    "x-loading": Loading
  },
  mounted() {
      this.renderChart()
  },
  methods: {
      renderChart(){
          this.showLoading=true
          axios.get(this.URLHEAD_AGENT + 'http://jingwuyun.yihuangis.com:9999/xfweb/Tbtask/getCarByDep?dep=').then(res=>{
              let json = res.data
              let axisLabels = json.tcount.map(o=>{
                  return o[0]
              })
              let axisValue = json.tcount.map(o=>{
                  return {name:o[0],value:o[1]}
              })
              this.option = {
                  tooltip:{show:true,trigger:'axis',formatter:'{b}:{c}辆'},
                  grid:{top:10,left:40,right:40,bottom:10,containLabel:true},
                  xAxis:{
                      type:'category',
                      data:axisLabels,
                      axisLine:{color:'#ffffff99'},
                      axisTick:{color:'#ffffff99'},
                      axisLabel:{color:'#fff',fontSize:12,rotate:45},
                      splitLine:{show:true,lineStyle:{color:'#ffffff10'}}
                  },
                  yAxis:{
                      type:'value',
                      axisLine:{color:'#ffffff99'},
                      axisTick:{color:'#ffffff99'},
                      axisLabel:{color:'#fff',fontSize:12},
                      splitLine:{show:true,lineStyle:{color:'#ffffff10'}}
                  },
                  series:[{
                      type:'bar',
                      barWidth:20,
                      data:axisValue,
                      itemStyle:{
                          normal:{
                              color:{
                                  type:'linear',x:0,y:0,x2:0,y2:1,
                                  colorStops:[{
                                      offset:0,color:'#3380f5ff'
                                  },{
                                      offset:0.9,color:'#3380f500'
                                  }]
                            },
                            barBorderRadius:[8,8,0,0]
                          }
                      },
                      label:{
                          show:true,
                          position:'top',
                          color:'#fff'
                      }  
                  }]
              }
              this.$Crender('chart-cvm-vehicleorg',this.option)
              this.showLoading=false
          })
      }
  },
};
</script>

<style lang="" scoped>
</style>